<template>
  <div class="xy-home-wrapper">
    <!-- <div class="xy-info"> -->
    <!-- <el-row :gutter="20" style="height: 180px;">
				<el-col :span="6">
					<el-card style="background-color: #FE7781; padding: 25px;" shadow="hover">
						<h3 style="text-align: center;">关于会员的总数</h3>
						总是显示总是显示总是显示
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card style="background-color: #D287FD;padding: 25px;" shadow="hover">
						<h3 style="text-align: center;">关于会员的总数</h3>
						总是显示总是显示总是显示
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card style="background-color: #33CAF1;padding: 25px;" shadow="hover">
						<h3 style="text-align: center;">关于会员的总数</h3>
						总是显示总是显示总是显示
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card style="background-color: #16D987;padding: 25px;" shadow="hover">
						<h3 style="text-align: center;">关于会员的总数</h3>
						总是显示总是显示总是显示
					</el-card>
    </el-col>-->
    <!-- <el-col :span="14">
					<el-card shadow="hover">
						<el-tabs v-model="activeName">
							<el-tab-pane label="圆形图" name="first">
								<div id="chart2" :style="{width: '400px', height: '300px'}"></div>
							</el-tab-pane>
							<el-tab-pane label="柱形结构" name="second">
								<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
							</el-tab-pane>
							<!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>-->
    <!-- </el-tabs> -->

    <!-- </el-card> -->
    <!-- </el-col> -->
    <!-- </el-row>
    <div class="xy-search">-->
    <!-- <div class="block"> -->
    <!-- <span class="demonstration">时间筛选器: </span>
					<el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>-->
    <!-- </div> -->
    <!-- 	<p>{{value6}}</p>
				<span class="demonstration">地址筛选器: </span>
				<el-select v-model="value7" placeholder="地址选择">
					<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
						<span style="float: left">{{ item.label }}</span>
						<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
					</el-option>
				</el-select>
    </div>-->
    <!-- </div>
    -->
    <!-- <div class="xy-about">
			<el-row>
    <el-col class="el-col" style="border-right:20px solid #F4F4F4 ;" :span="13">-->
    <!-- <img width="80%" src="../assets/img/code.jpg" class="image" /> -->
    <!-- 	<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
				</el-col>
				<el-col class="el-col" :span="11">
					<div id="chart2" :style="{width: '300px', height: '300px'}"></div>
				</el-col>
    </el-row>-->
    <!-- </div> -->
    <!--
    </div>-->


    <!--------------------------------------------------图形----------------------------------------------->
    <el-row style="margin-bottom:0px">
      <el-col :span="24" class="gird">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align:center">
            <h2 style="margin:0">{{legendData ? legendData : new Date().getFullYear()}}店铺销售报表柱状图</h2>
          </div>
          <el-row>
            <el-col :span="18">
                <div id="myChart1" :style="{width: '80%', height: '340px', marginTop: '20px'}"></div>
            </el-col>
            <el-col :span="6">
              <div class="xy-search">
                <el-form label-width="80px" label-position="left">
                   <h4>按时间筛选</h4>
                  <el-form-item label="年">
                    <el-date-picker
                      @change="getYearData('year')"
                      format="yyyy"
                      value-format="yyyy"
                      v-model="selectYear"
                      type="year"
                      placeholder="选择年">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="月">
                    <el-date-picker
                      @change="getYearData('month')"
                      format="MM"
                      value-format="MM"
                      :disabled="disabledMonth"
                      v-model="selectMonth"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
                  </el-form-item>
                   <el-form-item label="日">
                     <el-input clearable :disabled="disabledDay" prefix-icon="el-icon-date" placeholder="选择日" style="width:70.5%" @focus="showSelect(0)" v-model="selectDay"></el-input>
                     <selectDay :key="0" ref="selectDay" @selectData="selectData" :visible.sync="off" :inputValue="selectDay" :monthData="selectMonth" :yearData="selectYear"></selectDay>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="gird">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align:center">
            <h2 style="margin:0">区域销售报表折线图</h2>
          </div>
          <el-row>
            <el-col :span="18">
              <div id="myChart3" :style="{width: '80%', height: '300px',marginTop: '20px'}"></div>
            </el-col>
            <el-col :span="6">
              <div class="xy-search">
                <el-form label-width="80px" label-position="left">
                   <h4>按时间筛选</h4>
                   <el-form-item label="区域选择">
                    <template>
                      <el-cascader style="width:220px;" v-model="catIds" :options="houseCats" @change="handleCatItemChange"
                        :change-on-select="true" :show-all-levels="false" :clearable="true" :props="props123" placeholder="按分类筛选">
                      </el-cascader>
                    </template>
                  </el-form-item>
                  <el-form-item label="年">
                    <el-date-picker
                      @change="pieGetYearData('year')"
                      format="yyyy"
                      value-format="yyyy"
                      v-model="pieSelectYear"
                      type="year"
                      placeholder="选择年">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="月">
                    <el-date-picker
                      @change="pieGetYearData('month')"
                      format="MM"
                      value-format="MM"
                      :disabled="pieDisabledMonth"
                      v-model="pieSelectMonth"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
                  </el-form-item>
                   <el-form-item label="日">
                     <el-input clearable :disabled="pieDisabledDay" prefix-icon="el-icon-date" placeholder="选择日" style="width:70.5%" @focus="pieShowSelect(0)" v-model="pieSelectDay"></el-input>
                     <selectDay :key="1" ref="pieSelectDay" @selectData="pieSelectData" :visible.sync="off" :inputValue="pieSelectDay" :monthData="pieSelectMonth" :yearData="pieSelectYear"></selectDay>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../api/api_user'
import * as API from "../api/index";
import * as util from "../util/util.js";
import selectDay from "../components/selectDay"
import pieSelectDay from "../components/pieSelectDay"
import $ from "jquery" 
// 引入基本模板
import echarts from "echarts";
// let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
//引入Lengend
require("echarts/lib/component/legend");
export default {
  name: "home",
  components: {
    selectDay, //选择天数组件
    pieSelectDay //选择天数组件
  },
  computed: {
    //柱形图
    //禁月
    disabledMonth(){
      return (this.selectYear == "" || this.selectYear == null) ? true : false; 
    },
    //禁天
    disabledDay(){
      return (this.selectMonth == "" || this.selectMonth == null) ? true : false; 
    },

    //折线图
    //禁月
    pieDisabledMonth(){
      return (this.pieSelectYear == "" || this.pieSelectYear == null) ? true : false; 
    },
    //禁天
    pieDisabledDay(){
      return (this.pieSelectMonth == "" || this.pieSelectMonth == null) ? true : false; 
    },

  },
  watch: {
   //清空月,日
   selectYear(val){
     if(val == "" || val == null){
        this.selectMonth = "";
        this.selectDay = "";
        this.getCurrentYearData();
     }
   },
   //清空日
   selectMonth(val){
     if(val == "" || val == null){
       this.selectDay = "";
       this.getYearData("year");
     }
   },

   //折线图
   //清空月,日
   pieSelectYear(val){
     if(val == "" || val == null){
        this.pieSelectMonth = "";
        this.pieSelectDay = "";
        this.pieGetYearData("year");
     }
   },
   //清空日
   pieSelectMonth(val){
     if(val == "" || val == null){
       this.pieSelectDay = "";
       this.pieGetYearData("year");
     }
   },
   
  },
  data() {
    return {
      //柱状图数据
      xAxisData: [], //x轴每段标题
      xAxisName: "", //x轴显示的tip
      seriesData: [], //每个bar数据
      legendData: "",
      histogramData: {
        xAxisData: {
           yearData: ["1","2", "3","4","5", "6","7", "8","9","10","11","12"], //每个月
           monthData :[
              "1","2", "3","4","5", "6","7", "8","9","10","11","12","13","14","15","16","17","18","19","20", 
              "21", "22", "23", "24","25","26","27","28", "29","30","31"
           ], //每天
        },
      },
      off: false, //选择天数对话框
      selectYear: "", //选择年份
      selectMonth: "", //选择月份
      selectDay: "", //选择天数

      //折线图
      pieOff: false, //选择天数对话框
      pieSelectYear: "", //选择年份
      pieSelectMonth: "", //选择月份
      pieSelectDay: "", //选择天数
      pieTimePoint: "",
      piexAxisData: [], 
      pieLegendData: [], 
      pielegendData: "",
      pieSeriesData: [],
      piexAxisName: "",
      catIds: [],
      props123: {
        label: 'region',
        value: 'regionId',
        children: 'regions',
        checkStrictly: true
      },
      houseCats: [],
      catId: "",
     

      searchTime: "",
      activeName: "first",
      value6: "",
      value7: "",
      cities: [
        {
          value: "Beijing",
          label: "北京"
        },
        {
          value: "Shanghai",
          label: "上海"
        },
        {
          value: "Nanjing",
          label: "南京"
        },
        {
          value: "Chengdu",
          label: "成都"
        },
        {
          value: "Shenzhen",
          label: "深圳"
        },
        {
          value: "Guangzhou",
          label: "广州"
        }
      ]
    };
  },
  mounted() {
    //开始绘制
    this.drawLine();
  },
  created() {
    var self = this;
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        function locationSuccess(options){
          console.log("获取位置成功", options);
        },
        function locationError(error){
          console.log("获取位置失败", error);
          self.$notify({
            type: "warning",
            message: "获取位置失败"
          });
        },
        {
            // 指示浏览器获取高精度的位置，默认为false
            enableHighAccuracy: true,
            // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
            timeout: 5000,
            // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
            maximumAge: 3000
        });
    }else{
        alert("您的浏览器不支持定位,请更换浏览器或更新浏览器版本");
    }
    //首页加载默认显示当前年统计信息
    this.getCurrentYearData();
    //获取区域选择
    this.getArea();
  },
  methods: {
    //获得区域选择级联
    getArea(){
      api.region().then(res => {
          console.log(res)
          if (res.code === 200) {
            this.houseCats = res.data;
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg,
              offset: 150
            });
          }
        })
    },
    //区域选择单击
    handleCatItemChange(val) {
      console.log('active item:', val);
      this.catId = val[val.length - 1];
      console.log(this.catId);
    },
    //首页加载默认显示当前年统计信息
    getCurrentYearData(){
      API.SC_GET("statistics/monthStatistics", {
        currentPage: 1,
        pageSize: 12
      }).then(
        res => {
          console.log("res当前年份展示的信息", res);
          var selectMonthData = res.data.list;
          this.seriesData = [];
          selectMonthData.forEach((e) => {
            this.xAxisData = this.histogramData.xAxisData.yearData;
            this.seriesData.push(e.realTotalMoney);
            this.xAxisName = "日期/月";
          });
          this.drawHistogram();
        },
        err => {}
      );
    },
    //清空选择
    clearSelect(){
      this.selectMonth = "";
      this.selectDay = "";
      this.timePoint = "";
    },
    pieGetYearData(type){
      if(this.pieSelectYear == "" || this.pieSelectYear == null){
        return;
      }
      var getPage = "";
      if(type == "year"){
        getPage = "getMonthPageL";
        this.selectMonth = "";
        this.selectDay = "";
      }else if(type == "month"){
        getPage = "getDayPageL";
        this.selectDay = "";
      }
      var selectYear = "";
      selectYear = this.pieSelectYear + "-" + 
                  (this.pieSelectMonth ? this.pieSelectMonth : "01") + "-" +
                  (this.pieSelectDay ? (Number(this.pieSelectDay) < 10 ? ("0" + this.pieSelectDay) : this.pieSelectDay) : "01") + " " +
                  (this.pieTimePoint ? this.pieTimePoint : "00:00:00");
      API.SC_GET(`order/${getPage}`, 
                  {
                    currentPage: 1,
                    pageSize: 31,
                    queryDate: selectYear,
                    regionId: this.catId
                  }
                )
                .then(
                  res => {
                    // console.log("res", res);
                    var selectData = res.data.list;
                    this.pieSeriesData = [];
                    this.piexAxisData = [];
                    if(type == "year"){
                      selectData.forEach((e) => {
                        if(e.region){
                          this.piexAxisData.push(e.region);
                        }
                        this.piexAxisData = this.histogramData.xAxisData.yearData;
                        this.pieSeriesData.push(e.count);
                        this.piexAxisName = "日期/月";
                      });
                    }else if(type == "month"){
                      selectData.forEach((e) => {
                        if(selectData.length == 28){ //平年
                          this.piexAxisData = this.histogramData.xAxisData.monthData.slice(0,28);
                        }else if(selectData.length == 29){ //闰年
                          this.piexAxisData = this.histogramData.xAxisData.monthData.slice(0,29);
                        }else{
                          this.piexAxisData = this.histogramData.xAxisData.monthData;
                        }
                        this.pieSeriesData.push(e.sum);
                        this.piexAxisName = "日期/天";
                      });
                    }
                    this.drawPie();
                  },
                  err => {
                    this.$notify({
                      type: "error",
                      message: "查询错误"
                    });
                  }
                );
    },
    //选择年份查询
    getYearData(type){
      // console.log("year", year);
      // console.log(new Date().getFullYear());
      if(this.selectYear == "" || this.selectYear == null){
        return;
      }
      var getPage = "";
      if(type == "year"){
        getPage = "getMonthPage";
        this.selectMonth = "";
        this.selectDay = "";
      }else if(type == "month"){
        getPage = "getDayPage";
        this.selectDay = "";
      }
      var selectYear = "";
      selectYear = this.selectYear + "-" + 
                  (this.selectMonth ? this.selectMonth : "01") + "-" +
                  (this.selectDay ? (Number(this.selectDay) < 10 ? ("0" + this.selectDay) : this.selectDay) : "01") + " " +
                  (this.timePoint ? this.timePoint : "00:00:00");
      API.SC_GET(`order/${getPage}`, 
                  {
                    currentPage: 1,
                    pageSize: 31,
                    queryDate: selectYear,
                  }
                )
                .then(
                  res => {
                    // console.log("res", res);
                    var selectData = res.data.list;
                    this.seriesData = [];
                    this.legendData = this.selectYear + 
                                      (this.selectMonth != "" ? "/"+this.selectMonth : this.selectMonth) + 
                                      (this.selectDay != "" ? "/"+this.selectDay : this.selectDay);
                    if(type == "year"){
                      selectData.forEach((e) => {
                        this.xAxisData = this.histogramData.xAxisData.yearData;
                        this.seriesData.push(e.count);
                        this.xAxisName = "日期/月";
                      });
                    }else if(type == "month"){
                      selectData.forEach((e) => {
                        if(selectData.length == 28){ //平年
                          this.xAxisData = this.histogramData.xAxisData.monthData.slice(0,28);
                        }else if(selectData.length == 29){ //闰年
                          this.xAxisData = this.histogramData.xAxisData.monthData.slice(0,29);
                        }else{
                          this.xAxisData = this.histogramData.xAxisData.monthData;
                        }
                        this.seriesData.push(e.sum);
                        this.xAxisName = "日期/天";
                      });
                    }
                    this.drawHistogram();
                  },
                  err => {
                    this.$notify({
                      type: "error",
                      message: "查询错误"
                    });
                  }
                );
    },
    //组件单击td方法
    selectData(data){
      // console.log("data", data);
      this.selectDay = data;
      this.getYearData("day");
    },
    //折线图
    pieSelectData(data){
      this.pieSelectDay = data;
      // this.pieGetYearData("day");
    },
    //显示选择天数对话框
    showSelect(type){
      // console.log(type);
      this.off = type == 0 ? true : false;
    },
    pieShowSelect(type){
      this.pieOff = type == 0 ? true : false;
    },
    //绘制柱形图
    drawHistogram(){
      let myChart1 = echarts.init(document.getElementById("myChart1"));
      // 绘制图表柱形图
      myChart1.setOption({
        title: {
          //   text: "店铺销售报表柱状图"
        },
        legend: {
          data: ["金额"],
          textSyle: {
            color: "yellow"
          }
        },
        //提示框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        xAxis: {
          name: this.xAxisName,
          data: this.xAxisData
        },
        yAxis: {
          name: "金额/元", //轴的标题
          nameGap: 10, //标题与y轴之间的距离
        },
        calculable: true,
        series: [
          {
            name: "金额",
            type: "bar",
            // data: [5, 20, 36, 10, 10, 20],
            data: this.seriesData,
            itemStyle : { normal: {label : {show: true}}},
            markPoint: {
              // symbol:'circle',
              // symbolSize:[50, 50],
              // symbolOffset:[0,-35],
              // itemStyle:{
              //     normal:{
              //       label:{
              //         show:true,
              //         color:'#fff',
              //         formatter: function (param) {
              //           // if(param.data.coord[1]>20){
              //           //   return '优秀'
              //           // }else if (param.data.coord[1]>10){
              //           //   return '良好'
              //           // } else {
              //           //   return '不达标'
              //           // }
              //           return param.name
              //         }
              //       },
              //       color:'#BD60F6'
              //     }
              //   },
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      });
    },
    //绘制折线图
    drawPie(){
      let myChart3 = echarts.init(document.getElementById("myChart3"));
      var option = {
        title: {
          //   text: "店铺销售报表折线图"
        },
		/* 线条颜色，可设置多个颜色 */
        // color: ["#ffa82f"] /* 图像四周边距设置 */,
        grid: {
          left: 30,
          top: 30,
          right: 20,
          bottom: 30
        },
        /* 图例说明 */
        legend: {
          // 图例排项 vertical-"竖向"; horizontal-"横向"
          orient: "horizontal", // 图例组件离容器左侧的距离
          right: 60,
          top: 0, //图例文字的样式
          textStyle: {
            color: "#6ab2ec"
          }, // 与series中每个name一一对应
          // data: ["米东区", "沙依巴克区", "新市区"]
          data: this.pieLegendData
        },
        /* 鼠标悬浮时显示数据 */
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          boundaryGap : false,
          name: this.piexAxisName,
          type: "category",
          data: this.piexAxisData, //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: "#6ab2ec"
            }
          }, //调整x轴的lable
          axisLabel: {
            textStyle: {
              fontSize: 10 // 让字体变小
            }
          }
        },
        yAxis: {
          name: "金额/元", //轴的标题
          nameGap: 10, //标题与y轴之间的距离
          type: "value", // 控制网格线是否显示
          splitLine: {
            show: true, //  改变轴线颜色
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#132a6e"]
            }
          }, //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: "#6ab2ec"
            }
          }
        } /* 数据配置，若有多条折线则在数组中追加{name: , data: } */,
        series: [
          {
            name: "金额",
            data: this.pieSeriesData,
            // stack: '总量',
            type: "line",
            symbol: "circle", // 设置折点大小
            symbolSize: 10, // 设置为光滑曲线
            smooth: true,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
          },
        ]
      };
      myChart3.setOption(option);
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.drawHistogram(); //绘制柱形图
      this.drawPie(); //绘制折线图
    }
  }
};
</script>

<style>
#chart2 {
  /* margin-left: 50px; */
  text-align: center;
}

.xy-home-wrapper {
  width: 100%;
  height: 100%;
  /* height: 700px; */
  /* background-image: url(../assets/img/home.jpg); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

#myChart {
  /* margin-left: 80px; */
  text-align: center;
}

.xy-search {
  /* padding: 25px; */
}

.demonstration {
  padding: 5px;
  font-size: 16px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
.xy-info .el-col {
  position: relative;
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-card__body {
  padding: 5px;
}

.xy-info {
  margin-top: 5px;
  padding: 10px;
  height: 308px;
  background-color: white;
}

.xy-about {
  padding: 20px 0 0 0;
  color: #545c64;
}
.xy-about .el-col {
  background-color: white;
}
.el-col-xy-scan {
}

.el-col-xy-text {
  border-left: 5px solid #545c64;
  border-right: 5px solid #545c64;
}

.xy-cir {
  text-align: center;
  height: 170px;
  border-radius: 50%;
  background-color: #c6c7c7;
}

.xy-cir p {
  line-height: 150px;
  font-size: 25px;
}

.gird{
	height: 530px;
}
.el-card{
	height: 100%;
}
.xy-home-wrapper .el-date-picker__header {
  display: none;
}
</style>
